<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Directory Services</title>
	<!--[if lt IE 9]>
		<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<script src="../Javascript/Flot/excanvas.js"></script>
	<![endif]-->
	<!-- The Fonts -->
	<link href="http://fonts.googleapis.com/css?family=Oswald|Droid+Sans:400,700" rel="stylesheet" />
	<!-- The Main CSS File -->
	<link rel="stylesheet" href="../CSS/style.css" />
	<!-- jQuery -->
	<script src="../Javascript/jQuery/jquery-1.7.2.min.js"></script>
	<!-- Flot -->
	<script src="../Javascript/Flot/jquery.flot.js"></script>
	<script src="../Javascript/Flot/jquery.flot.resize.js"></script>
	<script src="../Javascript/Flot/jquery.flot.pie.js"></script>
	<!-- DataTables -->
	<script src="../Javascript/DataTables/jquery.dataTables.min.js"></script>
	<!-- ColResizable -->
	<script src="../Javascript/ColResizable/colResizable-1.3.js"></script>
	<!-- jQuryUI -->
	<script src="../Javascript/jQueryUI/jquery-ui-1.8.21.min.js"></script>
	<!-- Uniform -->
	<script src="../Javascript/Uniform/jquery.uniform.js"></script>
	<!-- Tipsy -->
	<script src="../Javascript/Tipsy/jquery.tipsy.js"></script>
	<!-- Elastic -->
	<script src="../Javascript/Elastic/jquery.elastic.js"></script>
	<!-- ColorPicker -->
	<script src="../Javascript/ColorPicker/colorpicker.js"></script>
	<!-- SuperTextarea -->
	<script src="../Javascript/SuperTextarea/jquery.supertextarea.min.js"></script>
	<!-- UISpinner -->
	<script src="../Javascript/UISpinner/ui.spinner.js"></script>
	<!-- MaskedInput -->
	<script src="../Javascript/MaskedInput/jquery.maskedinput-1.3.js"></script>
	<!-- ClEditor -->
	<script src="../Javascript/ClEditor/jquery.cleditor.js"></script>
	<!-- Full Calendar -->
	<script src="../Javascript/FullCalendar/fullcalendar.js"></script>
	<!-- Color Box -->
	<script src="../Javascript/ColorBox/jquery.colorbox.js"></script>
	<!-- Kanrisha Script -->
	<script src="../Javascript/kanrisha.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
	<!-- Change Pattern -->
	<div class="changePattern">
		<span id="pattern1"></span>
		<span id="pattern2"></span>
		<span id="pattern3"></span>
		<span id="pattern4"></span>
		<span id="pattern5"></span>
		<span id="pattern6"></span>
	</div>
	<!-- Top Panel -->
	<div class="top_panel">
		<div class="wrapper">
			<div class="user">
				<img src="../Images/user_avatar.png" alt="user_avatar" class="user_avatar" />
				<span class="label">John Alex</span>
				<!-- Top Tooltip -->
				<div class="top_tooltip">
					<div>
						<ul class="user_options">
							<li class="i_16_profile"><a href="#" title="Profile"></a></li>
							<li class="i_16_tasks"><a href="#" title="Tasks"></a></li>
							<li class="i_16_notes"><a href="#" title="Notes"></a></li>
							<li class="i_16_options"><a href="#" title="Options"></a></li>
							<li class="i_16_logout"><a href="#" title="Log-Out"></a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="top_links">
				<ul>
					<li class="i_22_search search_icon">
						<div class="top_tooltip right_direction">
							<div>
								<form class="top_search_form" />
									<input type="text" class="top_search_input" />
									<input type="submit" class="top_search_submit" value="" />
								</form>
							</div>
						</div>
					</li>
					<li class="i_22_settings">
						<a href="#" title="Settings">
							<span class="label">Settings</span>
						</a>
					</li>
					<li class="i_22_upload">
						<a href="#" title="Upload">
							<span class="label">Upload</span>
						</a>
						<!-- Drop Menu -->
						<ul class="drop_menu menu_with_icons right_direction">
							<li>
								<a class="i_16_add" href="#" title="New Flie">
									<span class="label">New File</span>
								</a>									
							</li>
							<li>
								<a class="i_16_progress" href="#" title="2 Files Left">
									<span class="label">Files Left</span>
									<span class="small_count">2</span>
								</a>
							</li>
							<li>
								<a class="i_16_files" href="#" title="Browse Files">
									<span class="label">Browse Files</span>
								</a>
							</li>
						</ul>
					</li>
					<li class="i_22_inbox top_inbox">
						<a href="#" title="Inbox">
							<span class="label lasCount">Inbox</span>
							<span class="small_count">3</span>
						</a>
					</li>
					<li class="i_22_pages">
						<a href="#" title="Pages">
							<span class="label">Pages</span>
						</a>
						<!-- Drop Menu -->
						<ul class="drop_menu menu_without_icons">
							<li>
								<a title="403 Page" href="403.html">
									<span class="label">403 Forbidden</span>
								</a>									
							</li>
							<li>
								<a href="404.html" title="404 Page">
									<span class="label">404 Not Found</span>
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<header class="main_header">
		<div class="wrapper">
			<div class="logo">
				<a href="#" title="Kanrisha Home">
					<img src="../Images/kanrisha_logo.png" alt="kanrisha_logo" />
				</a>
			</div>
			<nav class="top_buttons">
				<ul>
					<li class="big_button">
						<div class="out_border">
							<div class="button_wrapper">
								<div class="in_border">
									<a href="#" title="Analytics" class="the_button">
										<span class="i_32_statistic"></span>
									</a>
								</div>
							</div>
						</div>
					</li>
					<li class="big_button">
						<div class="big_count">
							<span>7</span>
						</div>
						<div class="out_border">
							<div class="button_wrapper">
								<div class="in_border">
									<a href="#" title="Support" class="the_button">
										<span class="i_32_support"></span>
									</a>
								</div>
							</div>
						</div>
					</li>
					<li class="big_button">
						<div class="out_border">
							<div class="button_wrapper">
								<div class="in_border">
									<a href="#" title="Delivery" class="the_button">
										<span class="i_32_delivery"></span>
									</a>
								</div>
							</div>
						</div>
					</li>
					<li class="big_button">
						<div class="out_border">
							<div class="button_wrapper">
								<div class="in_border">
									<a href="#" title="Earning" class="the_button">
										<span class="i_32_dollar"></span>
									</a>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</nav>
		</div>
	</header>

	<div class="wrapper small_menu">
		<ul class="menu_small_buttons">
			<li><a title="General Info" class="i_22_dashboard" href="index.html"></a></li>
			<li><a title="Your Messages" class="i_22_inbox" href="inbox.html"></a></li>
			<li><a title="Visual Data" class="i_22_charts" href="charts.html"></a></li>
			<li><a title="Kit elements" class="i_22_ui" href="ui.html"></a></li>
			<li><a title="Some Rows" class="i_22_tables smActive" href="tables.html"></a></li>
			<li><a title="Some Fields" class="i_22_forms" href="forms.html"></a></li>
		</ul>
	</div>

	<div class="wrapper contents_wrapper">
		
		<aside class="sidebar">
			<ul class="tab_nav">
				<li class="i_32_dashboard">
					<a href="index.html" title="General Info">
						<span class="tab_label">Organisation</span>
						<span class="tab_info">General Info</span>
					</a>
				</li>
				<li class="i_32_inbox">
					<a href="inbox.html" title="Your Messages">
						<span class="tab_label">Services</span>
						<span class="tab_info">Programe</span>
					</a>
				</li>
				<li class="i_32_charts">
					<a href="charts.html" title="Visual Data">
						<span class="tab_label">Services</span>
						<span class="tab_info">Visual Data</span>
					</a>
				</li>
				<li class="i_32_ui">
					<a href="ui.html" title="Kit elements">
						<span class="tab_label">Goverment</span>
						<span class="tab_info">Office Regions</span>
					</a>
				</li>
				<li class="active_tab i_32_tables">
					<a href="tables.html" title="Some Rows">
						<span class="tab_label">Geography</span>
						<span class="tab_info">Trust Regions</span>
					</a>
				</li>
				<li class="i_32_forms">
					<a href="forms.html" title="Some Fields">
						<span class="tab_label">Premises</span>
						<span class="tab_info">Some Fields</span>
					</a>
				</li>
			</ul>
		</aside>

		<div class="contents">
			<div class="grid_wrapper">
				<div class="g_6 contents_header">
					<h3 class="i_16_table tab_label">Goverment Office Management</h3>
					<div><span class="label">Control Managemenr of Goverment Office</span></div>
				</div>
				
				<div class="g_12 separator"><span></span></div>
				<div style="clear:both;"></div>
				<!-- Simple Table -->
				<div id="list_contact" class="g_12">
					<div class="widget_header wwOptions">
						<h4 class="widget_header_title wwIcon i_16_data">List Contacts</h4>							
					</div>
					<div class="widget_contents noPadding">
						<div class="dataTables_wrapper">
							<div class="dtTop">
							<div class="dtShowPer">
								<div class="dataTables_length">
									<label>
										Show contacts: 
										<div class="selector">
											<span style="-moz-user-select: none">10</span>
											<select name="DataTables_Table_0_length" size="1" style="opacity: 0;">
												<option value="10" selected="selected">10</option>
												<option value="25">25</option>
												<option value="50">50</option>
												<option value="100">100</option>
											</select>
										</div>
									</label>
								</div>
							</div>
							<div class="dtFilter">
								<div class="dataTables_filter">
									<div style="width: auto; margin-left: 15px; float: left;">
										First Name:
										<input class="simple_field" type="text"  style="width: 150px;"/>
									</div>
									
									<div style="width: auto; margin-left: 25px; float: right;">
										Surname:
										<input class="simple_field" type="text" style="width: 150px;" />
									</div>
									<div id="control_buttons" style="margin-left: 15px;">
										<input type="button" value="Search" class="simple_buttons" style="width: auto; margin-left: 15px; "/>
										<input type="button" value="Clear" class="simple_buttons" style="margin-left: 15px; width: auto;"/>
										<input type="button" value="None" class="simple_buttons" style="margin-left: 15px; "/>
										<input type="button" value="Create" class="simple_buttons" style="margin-left: 15px; "/>
									</div>
								</div>
							</div>
							
						</div>								
						<div class="dtTables">
							<table id="DataTables_Table_0" class="tables  noObOLine dataTable" aria-describedby="DataTables_Table_0_info">
								<thead>
									<tr id="head_table">
										<td></td>
										<td>Contact Name</td>
										<td>Mobile Phone</td>
										<td>Email</td>
										<td>Contact Type</td>
										<td>Is Active?</td>
										<td></td>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>
											<input type="radio" name="contact_row" class="simple_form" />
										</td>
										<td>Nguyen Hoang Hai</td>
										<td>0975700915</td>
										<td>hainhh1@fsoft.com.vn</td>
										<td>True</td>
										<td></td>
										<td></td>
									</tr>
									<tr>
										<td>
											<input type="radio" name="contact_row" class="simple_form" />
										</td>
										<td>Vu Nhu Tien</td>
										<td>0988888787</td>
										<td>tiennv@fsoft.com.vn</td>
										<td>False</td>
										<td></td>
										<td></td>
									</tr>
									<tr>
										<td>
											<input type="radio" class="simple_form" name="contact_row" class="simple_field" />
										</td>
										<td>Nguyen Dai Quang</td>
										<td>0987654634</td>
										<td>quangnd6@fsoft.com.vn</td>
										<td></td>
										<td></td>
										<td></td>
									</tr>
								</tbody>
							</table>
							
						</div>
						<div class="dtBottom">
							<div class="dtInfo">
								<div>Show 1 to 3 of 3 entries</div>
								<div id="control_buttons" >
									<input type="button" value="Select" class="simple_buttons" style="width: auto; margin-left: 15px; "/>
									<input type="button" value="Edit" class="simple_buttons bdC" style="margin-left: 15px; width: auto;"/>
									<input type="button" value="Close" class="simple_buttons" style="margin-left: 15px; "/>
									
							</div>
							</div>
							<div class="dtPagination">
								<div>
									<a>First</a>
									<a>Previous</a>
									<a>1</a>
									<a>2</a>
									<a>...</a>
									<a>10</a>
									<a>Next</a>
									<a>Last</a>
								</div>
								
							</div>
						</div>
						</div>
					</div>
				</div>
				<!-- Separator -->
				<div style="clear:both;"></div>
				<div class="g_12 separator"><span></span></div>
			</div>		
		</div>
	</div>

	<footer>
		<div class="wrapper">
			<span class="copyright">
				COPYRIGHT © 2012 PANTRY GROUP - FR-HN167N
			</span>
		</div>
	</footer>
</body>
</html>